<template>
  <div style="width: 800px;"
       id="docxId"
       class='mb-8 invisible'>
    <main class=''>
      <h1 class='text-center text-lg mb-8'>合同模板</h1>

      <div class='flex justify-between mb-4'>
        <div class='text-left flex-col gap-2'>
          <div>甲方（申请人）：【{{record.partyAName}}】</div>
          <div>身份证号码/统一社会信用代码：【{{record.partyAIdCard}}】</div>
          <div>地址：【】</div>
          <div>联系电话：【{{record.partyAContact}}】</div>
        </div>

        <div class='text-left flex-col gap-2'>
          <div>乙方（被申请人）：【{{record.partyBName}}】</div>
          <div>身份证号码/统一社会信用代码：【{{record.partyBIdCard}}】</div>
          <div>地址：【】</div>
          <div>联系电话：【{{record.partyBContact}}】</div>
        </div>
      </div>

      <div class='flex-col gap-2 mb-8'>
        <p>鉴于甲乙双方因【纠纷事由】产生纠纷，双方自愿申请调解，并达成如下协议：</p>
        <p>一、纠纷概述（在此简要描述纠纷的起因、经过和争议焦点）</p>
        <p>二、调解结果</p>
        <ol class='list-decimal ml-4'>
          <li>甲乙双方同意【具体解决方案】。</li>
          <li>甲方同意【具体行动/补偿/赔偿等】。</li>
          <li>乙方同意【具体行动/补偿/赔偿等】。</li>
        </ol>
        <p>三、履行期限 本协议自双方签字（或盖章）之日起【具体天数】内履行完毕。</p>
        <p>四、违约责任</p>
        <ol class='list-decimal ml-4'>
          <li>如甲方未按照本协议约定履行义务，应承担【违约责任】。</li>
          <li>如乙方未按照本协议约定履行义务，应承担【违约责任】。</li>
        </ol>
        <p>五、其他约定（在此可添加双方认为需要约定的其他事项）</p>
        <p>六、本协议一式两份，甲乙双方各执一份，具有同等法律效力。</p>
      </div>

      <div class='flex-col gap-8 mb-8'>
        <div>
          <p>甲方（签字/盖章）：__________
            日期：【&nbsp;&nbsp;&nbsp;&nbsp;】年【&nbsp;&nbsp;&nbsp;&nbsp;】月【&nbsp;&nbsp;&nbsp;&nbsp;】日</p>
        </div>
        <div>
          <p>乙方（签字/盖章）：__________
            日期：【&nbsp;&nbsp;&nbsp;&nbsp;】年【&nbsp;&nbsp;&nbsp;&nbsp;】月【&nbsp;&nbsp;&nbsp;&nbsp;】日</p>
        </div>
      </div>
    </main>
  </div>
</template>
<script>
export default {
  props: ['record'],
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.mb-8 {
  margin-bottom: 8px;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
</style>
